<template>
  <section class="f-goods-order-detail w-card">
    <div class="title-box">
      <span class="title-text">商品订单详情-{{ sysOrderId }}-{{ orderInfo.shopName }}</span>
      <div v-if="orderInfo.orderStatus == 6">
        <el-button type="danger" plain @click="openDialog()">! 线下支付审核</el-button>
      </div>
    </div>

    <div class="f-card">
      <p class="f-title">基础信息</p>
      <ul class="f-ul">
        <li>
          <p>商品名称：</p>
          <p>{{orderInfo.goodsName || '--'}}</p>
        </li>
        <li>
          <p>设备型号：</p>
          <p>{{orderInfo.equipmentType   || '--'}}</p>
        </li>
        <li>
          <p>商品标价：</p>
          <p>{{orderInfo.showPrice}}元</p>
        </li>
        <li>
          <p>设备颜色：</p>
          <p>{{orderInfo.color || '--'}}</p>
        </li>
        <li>
          <p>商品售价：</p>
          <p>{{orderInfo.actualPrice }}元</p>
        </li>
        <li>
          <p>设备数量：</p>
          <p>{{orderInfo.baseNum }}</p>
        </li>
      </ul>
    </div>

    <div class="f-card">
      <p class="f-title">支付信息</p>
      <ul class="f-ul">
        <li>
          <p>支付方式：</p>
          <p>{{orderInfo.buyType == 1? '金额': orderInfo.buyType == 2? '积分': '--'}}</p>
        </li>
        <li>
          <p>支付{{orderInfo.buyType == 1? '金额': orderInfo.buyType == 2? '积分': '--'}}：</p>
          <p v-if="orderInfo.buyType == 1">{{ orderInfo.payMoney }}元</p>
          <p v-if="orderInfo.buyType == 2">{{ orderInfo.payPoints }}</p>
        </li>
        <li>
          <p>订单状态：</p>
          <p style="color: rgb(182, 152, 63);">
            {{ orderStatus[orderInfo.orderStatus] }}
          </p>
        </li>
        <li>
          <p>支付时间：</p>
          <p>{{orderInfo.payTime ? getDateTime(orderInfo.payTime)[6]: '--'}}</p>
        </li>
        <li>
          <p>订单描述：</p>
          <p>
            {{ orderInfo.orderStatusMsg }}
          </p>
        </li>
        <li>
          <p>创建时间：</p>
          <p>{{ getDateTime(orderInfo.createTime)[6] || '--' }}</p>
        </li>
        <li>
          <p>付款凭证：</p>
          <el-image v-for="(item,index) in orderInfo.orderFile" :key="index"
            style="width: 100px; height: 100px;margin-right: 10px" :src="item" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
            fit="cover" :preview-src-list="orderInfo.orderFile" />
        </li>
        <li>
          <p>备注：</p>
          <p>{{ orderInfo.userRemarks || '--' }}</p>
        </li>
      </ul>
    </div>

    <div class="f-card">
      <p class="f-title">物流信息</p>
      <ul class="f-ul">
        <li>
          <p>物流单号：</p>
          <p>{{ orderInfo.logisticsNum || '--' }}</p>
        </li>
        <li>
          <p>收件人：</p>
          <p>{{orderInfo.receiveName || '--'}}（{{ orderInfo.receivePhone }}）</p>
        </li>
        <li>
          <p>物流公司：</p>
          <p>{{ orderInfo.logisticsName || '--' }}</p>
        </li>
        <li>
          <p>收货地址：</p>
          <p>
            {{ (orderInfo.provinceAreaName || '') + (orderInfo.cityAreaName || '') + (orderInfo.areaAreaName || '') }}{{ orderInfo.receiveAddressDetail || '--' }}
          </p>
        </li>
      </ul>
    </div>

    <el-dialog v-model="dialogVisible" :title="dialogForm.title" width="600">
      <el-form ref="dialogFormRef" :model="dialogForm" :rules="dialogRules">
        <el-form-item prop="result" label="支付结果">
          <el-select v-model="dialogForm.result" clearable>
            <el-option label="支付成功" value="1" />
            <el-option label="关闭订单" value="2" />
          </el-select>
        </el-form-item>
        <template v-if="dialogForm.result == 1">
          <el-form-item prop="payMoney" label="实际支付金额">
            <el-input v-model="dialogForm.payMoney" clearable placeholder="请输入实际支付金额" type="number">
              <template #append>
                <p>元</p>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="payTime" label="支付时间">
            <el-date-picker v-model="dialogForm.payTime" type="datetime" value-format="x" placeholder="请选择"
              style="width: 100% !important" />
          </el-form-item>
          <el-form-item prop="remarks" label="备注">
            <el-input v-model="dialogForm.remarks" :rows="3" type="textarea" placeholder="请输入备注..." />
          </el-form-item>
        </template>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogCancel()">取消</el-button>
          <el-button type="primary" @click="dialogSave()">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </section>
</template>
    
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStateStore } from '@/store'
import { getWindowWidthAndHeight, warningDeal, getDateTime, successDeal, BlobDownLoad } from '@/utils/utils'
import api from '../api.js'

export default {
  setup(props, context) {
    const store = useStateStore()

    const router = useRouter()
    const route = useRoute();

    const dialogFormRef = ref(null)

    const state = reactive({
      sysOrderId: route.query.sysOrderId,
      orderInfo: {},

      orderStatus: {
        '5': '待支付',
        '6': '线下支付待审核',
        '10': '已支付',
        '30': '已发货',
        '40': '已收货',
        '50': '订单关闭',
      },

      dialogVisible: false,
      dialogForm: {},
      dialogRules: {
        payTime: [
          { required: true, message: "请选择支付时间", trigger: "change" },
        ],
        result: [
          { required: true, message: "请选择支付结果", trigger: "change" },
        ],
        payMoney: [
          { required: true, message: "请输入支付金额", trigger: "blur" },
        ],
        remarks: [
          { required: true, message: "请输入备注", trigger: "blur" },
        ],
      },
    })

    onMounted(() => {
      getAsdOrderDetail()
    })

    const getAsdOrderDetail = () => {
      let json = {
        uniqueId: state.sysOrderId
      }
      api.asdOrderDetail(json).then(res => {
        state.orderInfo = res.data
      })
    }

    const openDialog = (type, data) => {
      state.dialogForm.title = '线下支付审核'
      state.dialogVisible = true
    }

    const dialogCancel = () => {
      state.dialogVisible = false
      state.dialogForm = {}
      dialogFormRef.value.resetFields()
    }

    const dialogSave = () => {
      dialogFormRef.value.validate((valid, fields) => {
        if (valid) {
          let json = JSON.parse(JSON.stringify(state.dialogForm))
          json.sysOrderId = state.sysOrderId
          api.asdOrderOffpayAudit(json).then(res => {
            successDeal('操作成功！')
            getAsdOrderDetail()
            dialogCancel()
          })
        }
      })
    }

    return {
      ...toRefs(state),
      dialogFormRef,
      getDateTime,
      getAsdOrderDetail,
      dialogCancel,
      dialogSave,
      openDialog,
    }
  }
}
</script>
    
<style lang='scss' scoped>
.f-goods-order-detail {
  box-sizing: border-box;
  padding: 20px;

  .title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-right: 10px;
    .title-text {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .f-card {
    background: #f1f4f6;
    border-radius: 6px;
    padding: 20px;
    margin-top: 18px;
    .f-title {
      font-weight: 400;
      font-size: 16px;
      color: #000000;
      margin-bottom: 25px;
      display: flex;
      justify-content: space-between;
    }
    .f-ul {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 15px 0;
      li {
        display: flex;
        width: 50%;
        font-weight: 300;
        font-size: 14px;
        color: #000000;
        p:first-child {
          color: #424242;
          width: 140px;
          text-align: right;
        }
        .f-weight-bold {
          font-weight: bold;
        }
      }
    }
  }
}
</style>